<template>
  <div class="park" v-if="park">
    <div class="park-inner">
      <div class="title">
        <i></i>
        <span>吴中路真北路通用</span>
      </div>
      <div class="input-box">
        <i></i>
        <input
          type="text"
          placeholder="请输入您的车牌号"
          v-model="form.carNo"
          :disabled="park.status ? true : false"
        />
      </div>
      <div class="tip">* 车牌号需核对无误在提交，如需更改请联系客服！</div>
      <div class="upload">
        <div class="title">上传驾驶证：</div>
        <div class="upload-box">
          <van-uploader
            v-model="caseFileList"
            :after-read="caseAfterRead"
            @delete="handleCaseDelete"
            :max-count="1"
          ></van-uploader>
        </div>
        <div class="tip">* 行驶证上的姓名需和设计师入驻时填写的姓名一致！</div>
      </div>
      <div class="btn" @click="submit">
        <my-button name="提交" />
      </div>
    </div>
    <Tip class="tip-suss" ref="tipSuss">
      <p>恭喜您，提交成功啦～</p>
      <p>系统将会在3～5个工作日内审核</p>
      <my-button class="my-btn" name="确定" @btnClick="handleBtnClick" />
    </Tip>
  </div>
</template>
<script>
import Tip from '@/components/tip/tip'
import { addlicence, getlicence, upload } from '@/api/my'
const ERR_OK = 200
export default {
  components: {
    Tip
  },
  data () {
    return {
      form: {
        carNo: '',
        carImg: ''
      },
      park: null,
      caseFileList: []
    }
  },
  mounted () {
    if (localStorage.getItem('car_no')) {
      this.car_no = localStorage.getItem('car_no')
    }
  },
  created () {
    this._getlicence()
  },
  methods: {
    handleCaseDelete (file, detail) {
      this.form.carImg = ''
    },
    caseAfterRead (files) {
      const formData = new FormData()
      formData.append('photo', files.file)
      this._upload(formData).then(res => {
        this.form.carImg = res.data.photo
      })
    },
    _upload (photo) {
      return upload(photo)
        .then(res => {
          if (res.code === ERR_OK) {
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleBtnClick () {
      this.$refs.tipSuss.hide()
      this.$router.back()
    },
    submit () {
      if (this.park.status) {
        this.$toast('您已绑定过车牌号，请联系客服进行更改~')
        return
      }
      if (!this.form.carNo) {
        this.$toast('请输入车牌号~')
        return
      }
      if (!this.form.carImg) {
        this.$toast('请上传驾驶证~')
        return
      }
      this._addlicence(this.form).then(res => {
        this.$refs.tipSuss.show()
        localStorage.setItem('car_no', res.data.car_no)
      })
    },
    _addlicence ({ carNo, carImg }) {
      return addlicence({ carNo, carImg })
        .then(res => {
          if (res.code === ERR_OK) {
            this.$toast('添加成功')
            return Promise.resolve(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getlicence () {
      getlicence()
        .then(res => {
          if (res.code === ERR_OK) {
            if (res.data.status) {
              this.form.carNo = res.data.car_no
              this.form.carImg = res.data.car_img
              this.caseFileList = [{ url: res.data.car_img }]
            } else {
              this.form.carNo = ''
              this.form.carImg = ''
            }
            this.park = res.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
.upload {
  margin-top: 0.5rem;
  .title {
    font-size: 0.32rem;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(4, 0, 0, 1);
    line-height: 0.76rem;
  }
  .input-box {
    width: 100%;
    height: 0.72rem;
    background: rgba(243, 243, 244, 1);
    font-size: 0;

    input {
      width: 100%;
      height: 100%;
      border: none;
      outline: none;
      padding: 0.24rem 0.34rem;
      box-sizing: border-box;
      background: #f3f3f4;
      color: #444;
      font: initial;
      font-size: 0.24rem;
      &::placeholder {
        font-size: 0.24rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(153, 153, 153, 1);
      }
    }
  }
}
.upload {
  .van-uploader {
    /deep/.van-uploader__wrapper {
      width: 100%;
      height: 100%;

      .van-uploader__preview {
        margin: 0;
        width: 2.06rem;
        height: 2.06rem;
        // border: 1px dashed #ccc;
        margin-right: 0.15rem;
        margin-bottom: 0.2rem;
        position: relative;
        i {
          font-size: 0;
          display: inline-block;
          width: 0.66rem;
          height: 0.66rem;
          position: absolute;
          right: 0;
          bottom: 0;
          top: auto;
          background: url("../../assets/images/icon_sc.png") no-repeat;
          background-size: cover;
          border-radius: 0;
        }
        .van-image {
          width: 100%;
          height: 100%;
          border-radius: 0;
          img {
            width: 100%;
          }
        }
      }
      .van-uploader__upload {
        margin: 0;
        background: none;
        width: 2.06rem;
        height: 2.06rem;
        border-radius: 0;
        background: url("../../assets/images/icon_scan.png") no-repeat;
        background-size: cover;
        input {
          width: 100%;
          height: 100%;
        }
        i {
          opacity: 0;
        }
      }
    }
  }
}
.park {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
  background: #fff;
  padding: 0.78rem 0.72rem;
  box-sizing: border-box;
  .park-inner {
    position: relative;
    width: 100%;
    height: 100%;
  }
  .title {
    display: flex;
    align-items: center;
    i {
      display: inline-block;
      width: 0.72rem;
      height: 0.23rem;
      background: url("../../assets/images/icon_logo .png") no-repeat;
      background-size: cover;
      margin-right: 0.27rem;
    }
    span {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 500;
      color: rgba(4, 0, 0, 1);
    }
  }
  .input-box {
    display: flex;
    align-items: center;
    padding: 0.38rem 0;
    margin-top: 0.61rem;
    border-bottom: 1px solid #dadada;
    i {
      display: inline-block;
      width: 0.37rem;
      height: 0.34rem;
      background: url("../../assets/images/xiaoc.png") no-repeat;
      background-size: cover;
      margin-right: 0.2rem;
    }
    input {
      flex: 1;
      border: none;
      outline: none;
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      &::before {
        color: rgba(153, 153, 153, 1);
      }
    }
  }
  .tip {
    font-size: 0.22rem;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(0, 4, 0, 1);
    margin-top: 0.2rem;
  }
  .btn {
    position: absolute;
    left: 0;
    bottom: 1rem;
    font-size: 0;
    width: 100%;
  }
  .tip-suss {
    p {
      font-size: 0.28rem;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(0, 4, 0, 1);
      line-height: 0.46rem;
      text-align: center;
      &:nth-of-type(1) {
        margin-top: 0.8rem;
      }
    }
    .my-btn {
      margin-top: 0.62rem;
    }
  }
}
</style>
